<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="open" width="1080px" append-to-body>
      <div id="printArea">
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="检验单编号" prop="iqcCode">
              <el-input v-model="form.iqcCode" placeholder="请输入来料检验单编号" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="检验单名称" prop="iqcName">
              <el-input v-model="form.iqcName" placeholder="请输入检验单名称" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="center">物料与供应商</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="产品物料编码" prop="itemCode">
             <el-input v-model="form.itemCode" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品物料名称" prop="itemName">
              <el-input v-model="form.itemName" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位" prop="unitOfMeasure">
              <el-input v-model="form.unitOfMeasure" readonly />
            </el-form-item>
          </el-col>
        </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="品牌" prop="itemBrand">
                <el-input v-model="form.itemBrand" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="颜色" prop="itemColor">
                <el-input v-model="form.itemColor" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="技术要求" prop="itemTechReq">
                <el-input v-model="form.itemTechReq" readonly />
              </el-form-item>
            </el-col>
          </el-row>
         <el-row >
           <el-col :span="8">
             <el-form-item label="型号" prop="itemModel">
               <el-input v-model="form.itemModel" readonly />
             </el-form-item>
           </el-col>
           <el-col :span="8" v-if="form.vendorBatch">
             <el-form-item label="批次号" prop="vendorBatch">
               <el-input v-model="form.vendorBatch" readonly placeholder="请输入批次号" />
             </el-form-item>
           </el-col>
           <el-col :span="8" v-if="form.sourceDocCode">
             <el-form-item label="到货单号" prop="sourceDocCode">
               <el-input v-model="form.sourceDocCode" readonly placeholder="请输入批次号" />
             </el-form-item>
           </el-col>
         </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="供应商编码" prop="vendorCode">
              <el-input v-model="form.vendorCode" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商名称" prop="vendorName">
              <el-input v-model="form.vendorName" readonly />
            </el-form-item>
          </el-col>

        </el-row>
        <el-divider content-position="center">检测情况</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="本次接收数量" prop="quantityRecived">
              <el-input v-model="form.quantityRecived" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="本次检测数量" prop="quantityCheck">
              <el-input v-model="form.quantityCheck" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="不合格数量" prop="quantityUnqualified">
              <el-input v-model="form.quantityUnqualified" readonly />
            </el-form-item>
          </el-col>
        </el-row>
            <el-row>
          <el-col :span="8">
            <el-form-item label="来料日期" prop="reciveDate">
              <el-date-picker clearable
                v-model="form.reciveDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择来料日期"
                readonly>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检测日期" prop="inspectDate">
              <el-date-picker clearable
                v-model="form.inspectDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择检测日期"
                readonly>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检测结果" prop="checkResult">
              <el-select v-model="form.checkResult" placeholder="请选择检测结果" disabled>
                <el-option
                  v-for="dict in dict.type.mes_qc_result"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="检测人员" prop="inspector">
              <el-input v-model="form.inspector" placeholder="请输入检测人员" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="center">统计结果</el-divider>
          <el-row>
            <el-col :span="8">
              <el-form-item label="致命缺陷率" prop="crRate">
                <el-input v-model="form.crRate" readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="严重缺陷率" prop="majRate">
                <el-input v-model="form.majRate" readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="轻微缺陷率" prop="minRate">
                <el-input v-model="form.minRate" readonly="readonly" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="致命缺陷数量" prop="crQuantity">
                <el-input v-model="form.crQuantity" readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="严重缺陷数量" prop="majQuantity">
                <el-input v-model="form.majQuantity" readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="轻微缺陷数量" prop="minQuantity">
                <el-input v-model="form.minQuantity" readonly="readonly" />
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
        <el-divider v-if="form.iqcId !=null" content-position="center">检测项</el-divider>
        <div class="inspection-section">
        <el-card shadow="always" v-if="form.iqcId !=null" class="box-card">
          <IqcLine ref=line :iqcId="form.iqcId" :optType="optType"></IqcLine>
        </el-card>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="print">打 印</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getIqc} from "@/api/mes/qc/iqc";
import IqcLine from "./iqcline.vue";
import printJS from "print-js";
export default {
  name: "IqcPrint",
  dicts: ['mes_qc_result'],
  components: { IqcLine},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      optType:'view'
    };
  },
  created() {
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        iqcId: null,
        iqcCode: null,
        iqcName: null,
        templateId: null,
        vendorId: null,
        vendorCode: null,
        vendorName: null,
        vendorNick: null,
        vendorBatch: null,
        itemId: null,
        itemCode: null,
        itemName: null,
        specification: null,
        unitOfMeasure: null,
        quantityMinCheck: null,
        quantityMaxUnqualified: null,
        quantityRecived: null,
        quantityCheck: null,
        quantityUnqualified: null,
        crRate: null,
        majRate: null,
        minRate: null,
        crQuantity: null,
        majQuantity: null,
        minQuantity: null,
        checkResult: null,
        reciveDate: null,
        inspectDate: null,
        inspector: null,
        status: "PREPARE",
        remark: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    init(id){
      getIqc( id).then(response => {
        this.reset();
        this.form = response.data;
        this.open = true;
        this.title = "打印来料检验单";

      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    print() {
      printJS({
        type: 'html',
        printable: 'printArea',
        documentTitle: '来料检验单',
        header: '来料检验单',
        // 写入自定义样式
        headerStyle: 'text-align:center;width:100%;margin-top:5px;font-weight: 300;',
        style: `@page {
                  size: A4 landscape !important; /* 强制 A4 横向 */
                  margin: 2cm 1.5cm 2cm 1.5cm !important; /* 上右下左边距 */
                }
                @media print {
                  body {
                      -webkit-print-color-adjust: exact !important; /* 让颜色更准确 */
                      print-color-adjust: exact !important;
                  }
                  .section {
                    break-inside: avoid !important;
                  }
                  .el-form-item__content, .el-table .cell {
                    white-space: nowrap; /* 不允许文本换行 */
                    overflow: hidden; /* 超出部分隐藏 */
                    text-overflow: ellipsis; /* 超出部分用省略号表示 */
                  }
                  .el-table td, .el-table th {
                    box-sizing: border-box;
                    text-overflow: ellipsis;
                    vertical-align: middle;
                    position: relative;
                    padding: 0;
                    height: 70px; /* 增加高度 */
                    max-height: 70px;
                  }
                  .statistic-section, .inspection-section {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-bottom: 20px; /* 增加段落间距 */
                  }
                  .el-divider__text {
                    white-space: nowrap !important; /* 强制不换行 */
                    overflow: hidden; /* 超出部分隐藏 */
                    text-overflow: ellipsis; /* 超出部分用省略号表示 */
                    display: inline-block; /* 确保为行内块级元素 */
                    max-width: 100%; /* 最大宽度为100% */
                  }
                  .el-divider {
                    width: 100%; /* 确保 divider 宽度为100% */
                    margin: 20px 0; /* 上下外边距 */
                  }
                }
                .divider {
                  display: flex; /* 使用Flexbox布局 */
                  align-items: center; /* 垂直居中对齐 */
                  margin: 20px 0; /* 上下外边距 */
                }

                .divider::before,
                .divider::after {
                  content: ""; /* 伪元素内容为空 */
                  flex: 1; /* 伸展占据剩余空间 */
                  border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
                }
                .label {
                  display: flex;
                  padding: 10px 10px !important;
                  border: 1px solid #d3d3d3; /* 蓝色边框 */
                  border-radius: 10px; /* 圆角 */
                  background-color: #fff; /* 白色背景 */
                  color: #1b9aee; /* 蓝色字体 */
                  font-family: "苹方 常规", "苹方", sans-serif;
                  font-weight: 700;
                  font-style: normal;
                  font-size: 24px;
                  text-align: center;
                  line-height: 20px;
                }
                .noprint{
                  display:none !important;
                }`,
        scanStyles: true,
        // 继承样式
        targetStyles: ['*'],
        maxWidth: 1960
      });
    },
  }
};
</script>
<style scoped>

.el-table {
  page-break-inside: auto; /* 允许表格内容分页 */
  break-inside: auto;
}

.el-table::before {
  display: none; /* 移除表格底部的多余线条 */
}

.el-table__body-wrapper {
  overflow-x: hidden; /* 隐藏水平滚动条 */
}
</style>
